<template>
  <div>
    v-lazy图片懒加载
    <div class="box">
      <li v-for="(img,index) in imgs" :key="index">
        <!-- <img :src="img"> -->
        <img v-lazy="img" />
      </li>
    </div>
    <hr />
    message组件
    <div>
      <button @click="show">点击弹层</button>
    </div>
    <hr />
    element-ui用作用域插槽，iview用render函数
    <div>
      <Level type="1">hello1</Level>
      <Level type="2">hello2</Level>
    </div>
  </div>
</template>

<script>
import axios from "axios"; //基于promise async+await
import { Message } from "./message.js";
//import Level from './level.vue';//组件写法
import Level from "./level.js"; //render函数写法
export default {
  data() {
    return { imgs: [] };
  },
  created() {
    //vue的生命周期是同步执行的
    //不启动服务会报错
    this.getData()
  },
  methods: {
    getData() {
      //async
      //let {data} = await axios.get('http://localhost:4000/api/list');
      //this.imgs = data;
      //用then就不用async await了
      axios.get("http://localhost:4000/api/img").then((res) => {
        this.imgs = res.data;
      });
    },
    show() {
      //两种写法
      // Message.success({message:'这是一个弹层'})
      Message({ type: "warning", message: "这是一个弹层" });
    },
  },
  components: {
    Level,
  },
};
</script>
<style>
.box {
  height: 300px;
  overflow: scroll;
  width: 200px;
}
img {
  width: 100px;
  height: 100px;
}
</style>